<style lang="scss" scoped>
.main-box-low {
  min-height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 10px;
  cursor: pointer;
  box-shadow:
    0px 0.2px 0.4px rgba(0, 0, 0, 0.025),
    0px 0.4px 0.9px rgba(0, 0, 0, 0.036),
    0px 0.8px 1.8px rgba(0, 0, 0, 0.045),
    0px 1.3px 3.1px rgba(0, 0, 0, 0.054),
    0px 2.5px 5.8px rgba(0, 0, 0, 0.065),
    0px 6px 14px rgba(0, 0, 0, 0.09);
}

.main-box-high {
  min-height: 30px;
  overflow: hidden;
  padding-bottom: 10px;
  cursor: pointer;
  box-shadow:
    0px 0.2px 0.4px rgba(0, 0, 0, 0.025),
    0px 0.4px 0.9px rgba(0, 0, 0, 0.036),
    0px 0.8px 1.8px rgba(0, 0, 0, 0.045),
    0px 1.3px 3.1px rgba(0, 0, 0, 0.054),
    0px 2.5px 5.8px rgba(0, 0, 0, 0.065),
    0px 6px 14px rgba(0, 0, 0, 0.09);
}

.desc-box {
  padding: 0 5px;
  margin-top: 3vh;
  height: 40%;
  overflow: hidden;

  div {
    overflow: hidden;
    text-overflow: ellipsis; //显示省略号
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    //white-space: nowrap;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
  }

  p {
    display: block;
    margin-top: 10px;
    color: red;
  }
}

.img-box {
  text-align: center;
  margin: auto;
  width: 100%;
  overflow: hidden;
}

.water-fall-card {
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  align-content: flex-start;
  align-items: stretch;
}
</style>
<template>
  <div>
    <!--这里要把组件默认的开启跨域关闭,不然使用懒加载图片会报错-->
    <Waterfall
      :breakpoints="breakpoints"
      :crossOrigin="false"
      :list="product_data"
    >
      <template #item="{ item, url, index }">
        <!--这里写自己单个商品卡片的布局,组件会根据list的数量来生成卡片-->
        <div
          :class="index % 2 === 0 ? 'main-box-high' : 'main-box-low'"
          class="display-card"
          @click="card_click(item)"
        >
          <div class="img-box">
            <!--懒加载图片-->
            <LazyImg
              :url="item.s_goods_photos[0].path"
              style="width: 100%"
            ></LazyImg>
          </div>

          <div v-if="item.name" class="desc-box">
            <div>{{ item.name }}</div>
            <p>
              {{ money(item.price) }}
              <van-tag plain round type="primary">去看看</van-tag>
            </p>
          </div>
        </div>
      </template>
    </Waterfall>
  </div>
  <!--  </van-list>-->
</template>

<script lang="ts" setup>
import { computed, toRefs } from "vue";
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
import { useRouter } from "vue-router";
import { format_money } from "@/utils/format-money";
import { use_detail_store } from "@/stores/detail-store";

const detail_store = use_detail_store();
const $router = useRouter();
let props = defineProps(["product_data"]);
const { product_data } = toRefs(props);

let money = computed(() => {
  return (number: number) => {
    return format_money(number);
  };
});

const breakpoints = {
  1200: {
    //当屏幕宽度小于等于1200
    rowPerView: 4,
  },
  800: {
    //当屏幕宽度小于等于800
    rowPerView: 3,
  },
  500: {
    //当屏幕宽度小于等于500
    rowPerView: 2,
  },
};
const card_click = (item: any) => {
  detail_store.product_detail = item;
  $router.push("details");
};
</script>
